import React, { useState } from "react";
import { useEdit, useHandle } from "@/common/hooks";
import SysMenu,{SysMenuTreePlus,arrIndex} from "@/api/sys-menu";
import { Form, Space } from "antd";
import HButton from "@/components/ant-ext/HButton";
import HFormItem from "@/components/ant-ext/HFormItem";
import {  ClientTypeList } from "@/const/const";
import GetSelectNode, { HSearchTree } from "@/components/ant-ext/HSearchTree";
import "./index.less"
import IconSelect from "@/components/common/IconSelect";
import HAction from "@/components/common/HAction";
import { HNotification } from "@/config/route/route-func";

type Context = {
  disable: boolean,
  idVisible:boolean,
}

export default function Index() {
  const [treeData, setTreeData] = useState<SysMenuTreePlus[]>([]);
  const [loading, setLoading] = useState(false)
  const [editLoading, setEditLoading] = useState(false)
  const [currentNode, setCurrentNode] = useState<SysMenuTreePlus>()

  const [context, setContext] = useState<Context>({
    disable: true,
    idVisible:false,
  })

  const [form] = Form.useForm();

  const reload = useHandle(() => SysMenu.selectTree({
    setLoading,
    success: (data => {
      const arr: never[] = []
      const treeDataMapping = arrIndex(arr, data)
      setTreeData(treeDataMapping)
    })
  }), [])

  const saveAndFlush = useEdit(currentNode?.key ? SysMenu.doEdit : SysMenu.doSave, {
    setLoading: setEditLoading,
    success: () => {
      reload()
    }
  })


  const layout = {
    form: form
  }
  return (<div className="parent">
    <div className={"searchSelect"}>
      <Space style={{ marginBottom: "10px" }}>
        <HButton type={"primary"} onClick={() => {
          form.resetFields()
          form.setFieldValue("parentId", 0)
          setContext({ ...context, disable: false })
          setCurrentNode(undefined)
        }}> 添加一级节点</HButton>
        <HButton onClick={() => {
          if (currentNode) {
            setCurrentNode(undefined)
            setContext({ ...context, disable: false })
            form.resetFields()
            form.setFieldValue("parentId", currentNode.key)
          } else {
            HNotification.warning({ message: "请先选择父级菜单" })
          }
        }}> 添加子节点</HButton>
      </Space>
      <HSearchTree blockNode showLine showIcon={false} reload={reload} loading={loading} treeData={treeData}
        onSelect={(selectedKeys, info) => {
          const nodes = GetSelectNode(treeData, info.node)
          const currentNode = nodes[nodes.length - 1] as SysMenuTreePlus;
          setCurrentNode(currentNode)
          setContext({ ...context, disable: true })
          form.setFieldsValue({
            parentId: currentNode.parentId,
            id: currentNode.key,
            code: currentNode.code,
            menuName: currentNode.title,
            type: currentNode.type,
            path: currentNode.path,
            icon: currentNode.icon,
            sort: currentNode.sort,
          })
        }} />

    </div>
    <div className={"menuForm"}>
      <Form name={"submitForm"} labelCol={{ sm: 6 }} form={form} onFinish={() => {
        saveAndFlush({ body: form.getFieldsValue() })
      }}>
        <HFormItem {...layout} label={"父级id"} name={"parentId"} disabled={true} required={true}/>

        <HFormItem {...layout} label={"id"} name={"id"} hidden={!context.idVisible} disabled={true} />

        <HFormItem {...layout} label={"编码"} name={"code"} disabled={context.disable} required={true} />

        <HFormItem {...layout} label={"名称"} name={"menuName"} required={true} />

        <HFormItem {...layout} label={"路径"} name={"path"} required={true}/>

        <HFormItem {...layout} label={"排序"} name={"sort"} required={true}/>

        <HFormItem {...layout} label={"图标"} name={"icon"}>
          <IconSelect dataSource={[]} placeholder={"请选择图标"} />
        </HFormItem>

        <HFormItem {...layout} label={"类型"} name={"type"} type={"radio"} dataSource={ClientTypeList.select}
          initialValue={'menu'} required={true} />


        <Space style={{ marginLeft: "200px" }}>
          <HButton loading={editLoading} type={"primary"} onClick={form.submit}>保存 </HButton>
          <HAction disabled={currentNode === undefined} confirm={{
                        title: "是否删除[" + currentNode?.title + "]",
                        ok: (setLoading) => {
                            SysMenu.delete({
                                body: {id: currentNode?.key}, setLoading: setLoading, success: () => {
                                    setCurrentNode(undefined)
                                    reload()
                                    form.resetFields()
                                }
                            })
                        },
                    }}
                    >
                        删除
                    </HAction>

        </Space>

      </Form>
    </div>
  </div>);
};
